
{% load static %}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
        <title>天算星座-卫星大数据平台</title>
        <style type="text/css">
            html {
                height: 100%
            }

            body {
                height: 100%;
                margin: 0;
                padding: 0
            }

            #map {
                width: 100%;
                height: 100%;
                overflow: hidden;
                margin: 0;
                font-family: "微软雅黑";
            }

            .clickable {
                cursor: pointer; /* 当鼠标悬浮时，光标变成手指形状 */
            }
        </style>
        <script type="text/javascript"
                src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=b07Txardz712vRTFjDaBbPEmzOynEzOR"></script>
        <link rel="shortcut icon" href="{% static 'images/favicon.ico' %}"/>
        <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.css' %}">
        <link rel="stylesheet" href="{% static 'plugins/bootstrap-datepicker/css/bootstrap-datepicker.css' %}">
        <link rel="stylesheet" href="{% static 'plugins/font-awesome-4.7.0/css/font-awesome.css' %}">
        <link rel="stylesheet" href="{% static 'css/app.css' %}"/>

        <script src="{% static 'js/Cesium.js' %}"></script>
        <script src="{% static 'js/searchMap.js' %}"></script>
        <script src="{% static 'js/fingerprint2.min.js' %}"></script>
        <script src="{% static 'js/terraformer.js' %}"></script>
        <script src="{% static 'js/terraformer-wkt-parser.js' %}"></script>
        <script src="{% static 'js/plot3d.js' %}"></script>
        <script src="{% static 'js/config_dev.js' %}"></script>
        <script src="{% static 'js/config_prod.js' %}"></script>
        <script type="text/javascript" src="{% static 'js/manifest.js' %}"></script>
        <script type="text/javascript" src="{% static 'js/vendor.js' %}"></script>
        <script type="text/javascript" src="{% static 'js/app.js' %}"></script>
        <script type="text/javascript" src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
        <script src="{% static 'js/choosedate.js' %}"></script>
        <script src="{% static 'js/index.js' %}"></script>
        <script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.js' %}"></script>
        <script src="{% static 'plugins/bootstrap-datepicker/js/bootstrap-datepicker.js' %}"></script>
        <script src="{% static 'plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js' %}"></script>

        <script src="{% static 'sdk/sdk.js' %}"></script>
        <link rel="stylesheet" href="{% static 'sdk/sdk.css' %}"/>
        <link rel="stylesheet" href="{% static 'sdk/helper.css' %}"/>

    </head>
    <body>
        <div id="map"></div>
        <!--header-->
        <div data-v-d1db20f6="" data-v-258a4cb6="" class="logo-menu">
            <div data-v-d1db20f6="" class="logo-wrap clearfix">
                <div data-v-d1db20f6="" class="logo-img fl">
                    <img data-v-d1db20f6=""
                         src=""
                         alt="">
                </div>
                <div data-v-d1db20f6="" class="logo-title fl">
				<span data-v-d1db20f6="">
						天算星座-卫星大数据平台
				</span>
                </div>
            </div>
            <div data-v-d1db20f6="" class="menu-dialog" style="display: none;">
                <i data-v-d1db20f6="" class="close-icon el-icon-close">
                </i>
                <div data-v-d1db20f6="" class="menu-img">
                    <img data-v-d1db20f6=""
                         src=""
                         alt="">
                </div>
            </div>
        </div>
        <!--left-->
        <div data-v-37c16eed="" data-v-258a4cb6="" class="header-wrap headerGradient">
            <div data-v-37c16eed="" class="header">
                <div data-v-37c16eed="" class="fr header-content" style="width:100px;">
				<span data-v-37c16eed="" class="avartar">
					<i data-v-37c16eed="" class="icon iconfont icontouxiang">
					</i>
				</span>
                </div>
                <div data-v-37c16eed="" class="fr home-wrap">
                    <div data-v-37c16eed="" class="to-index">
                        <a href="https://www.bupt.edu.cn/" style="color: white;">
                            北京邮电大学
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div data-v-258a4cb6="" id="left">
            <div data-v-258a4cb6="" class="conditions-retrieval leftZore">
            </div>
            <div data-v-258a4cb6="" class="conditions-text leftZoreText" id="search_btn">
                数据检索
            </div>
            <div data-v-258a4cb6="" class="switch-text leftZoreBtn" onclick="moveLeft(1)">
                <i data-v-258a4cb6="" class="el-icon-arrow-up clickable"></i>
            </div>
        </div>
        <div data-v-258a4cb6="" id="search_right" class="clickable" style="display: none">
            <div data-v-258a4cb6="" class="conditions-retrieval"></div>
            <div data-v-258a4cb6="" class="conditions-text">
                数据检索
            </div>
            <div data-v-258a4cb6="" class="switch-text" onclick="moveLeft(0)">
                <i data-v-258a4cb6="" class="el-icon-arrow-down clickable"></i>
            </div>
        </div>
        <div data-v-5855f98c="" id="search_set" data-v-258a4cb6="" class="panel_wrap"
             style="display: none; flex-direction: column;">
            <form id="myForm" action="bound.html" method="post" novalidate>
                {% csrf_token %}
                <div data-v-5855f98c="" id="search_set" data-v-258a4cb6="">
                    <div data-v-132f128f="" data-v-5855f98c="" class="region_content">
                        <div data-v-132f128f="" class="el-tabs el-tabs--top">
                            <div class="el-tabs__header is-top">
                                <div class="el-tabs__nav-wrap is-top">
                                    <div class="el-tabs__nav-scroll">
                                        <div role="tablist" class="el-tabs__nav is-top"
                                             style="transform: translateX(0px);">
                                            <div class="el-tabs__active-bar is-top"
                                                 style="width: 40px; transform: translateX(0px);">
                                            </div>
                                            <div id="tab-first" aria-controls="pane-first" role="tab"
                                                 aria-selected="true"
                                                 tabindex="0" class="el-tabs__item is-top is-active">
                                                检索位置
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="el-tabs__content">
                                <div data-v-132f128f="" role="tabpanel" id="pane-first" aria-labelledby="tab-first"
                                     class="el-tab-pane">
                                    <div data-v-132f128f="" class="select_wrap">
                                        <div data-v-132f128f="" class="select_content">
                                            <div data-v-132f128f="" class="el-select">
                                                <div class="el-select__tags" style="width: 100%; max-width: 328px;">
                                                    <input type="text" autocomplete="off" placeholder="检索地址"
                                                           class="el-select__input"
                                                           style="flex-grow: 1; width: 0.0609756%; max-width: 318px;"
                                                           name="position1" id="position1">
                                                </div>
                                                <div class="el-input el-input--suffix">
                                                    <input type="text" readonly="readonly" autocomplete="off"
                                                           placeholder="" class="el-input__inner"
                                                           style="height: 39.9958px;">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div data-v-5855f98c="" class="select-sousuo clearfix">
                    <div data-v-5855f98c="" class="tabs-wrap fl">
                        <div data-v-5855f98c="" class="el-tabs el-tabs--card el-tabs--top">
                            <div class="el-tabs__header is-top">
                                <div class="el-tabs__nav-wrap is-top">
                                    <div class="el-tabs__nav-scroll">
                                        <div role="tablist" class="el-tabs__nav is-top"
                                             style="transform: translateX(0px);">
                                            <div id="tab-1" aria-controls="pane-1" role="tab" tabindex="0"
                                                 class="el-tabs__item is-top is-active" aria-selected="true">
										<span data-v-5855f98c="" class="tab-wrap">
											<span data-v-5855f98c="" class="noclose">
												检索条件
												<i data-v-5855f98c="" class="el-icon-caret-bottom" style="">
												</i>
											</span>
										</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="el-tabs__content">
                                <div data-v-5855f98c="" role="tabpanel" id="pane-1" aria-labelledby="tab-1"
                                     class="el-tab-pane" style="">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div data-v-5855f98c="" class="fr sousuo-icon">
                        <button type="submit"  tabindex="0"
                                style="height: 40px;width: 40px;" id="searchBtn">
                            <i data-v-5855f98c="" class="icon-sousuo">
                                <i data-v-5855f98c="" class="handle">
                                </i>
                            </i>
                        </button>
                    </div>
                </div>
                <div data-v-5855f98c="" class="dropdown_panel">
                    <div data-v-5855f98c="" class="LD_wrap">
                        <div data-v-5855f98c="" class="list list-title clearfix" style="margin-top: 0px;">
                            <div data-v-5855f98c="" class="fl">
                                卫星选择
                            </div>
                            <div data-v-5855f98c="" class="fr dropdown_wrap">
                                <div data-v-5855f98c="" class="el-dropdown">
							<span data-v-5855f98c="" class="el-dropdown-link el-dropdown-selfdefine  "
                                  aria-haspopup="list" aria-controls="dropdown-menu-7255" role="button" tabindex="0">
								按卫星系列
								<i data-v-5855f98c="" class="el-icon-arrow-down el-icon--right">
								</i>
								<i data-v-5855f98c="" class="el-icon-caret-bottom">
								</i>
							</span>
                                </div>
                            </div>
                        </div>
                        <div data-v-5855f98c="" class="list">
                            <div data-v-4ed19afa="" data-v-5855f98c="" class="satellite-sensor-filter">
                                <div data-v-4ed19afa="" class="clear-btn" style="">
                                </div>
                                <div data-v-654c3e52="" data-v-4ed19afa="" class="el-select filter-input"
                                     style="display: none;">
                                    <div class="el-select__tags" style="width: 100%;">
                                        <!---->
                                        <span>
								</span>
                                        <input type="text" autocomplete="off" class="el-select__input"
                                               style="flex-grow: 1;">
                                    </div>
                                    <div class="el-input el-input--suffix">
                                        <!---->
                                        <input type="text" readonly="readonly" autocomplete="off" placeholder=""
                                               class="el-input__inner" style="height: 40px;">
                                        <!---->
                                        <span class="el-input__suffix">
									<span class="el-input__suffix-inner">
										<i class="el-select__caret el-input__icon el-icon-">
										</i>
                                        <!---->
                                        <!---->
                                        <!---->
                                        <!---->
                                        <!---->
									</span>
                                            <!---->
								</span>
                                        <!---->
                                        <!---->
                                    </div>
                                    <div class="el-select-dropdown el-popper is-multiple" style="display: none;">
                                        <div class="el-scrollbar" style="">
                                            <div class="el-select-dropdown__wrap el-scrollbar__wrap"
                                                 style="margin-bottom: -6px; margin-right: -6px;">
                                                <ul class="el-scrollbar__view el-select-dropdown__list">
                                                    <!---->
                                                    <li data-v-654c3e52="" class="el-select-dropdown__item">
                                                        <div data-v-654c3e52="" class="filter_wrap">
                                                            <div data-v-654c3e52="" class="model_select">
                                                            </div>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="el-scrollbar__bar is-horizontal">
                                                <div class="el-scrollbar__thumb" style="transform: translateX(0%);">
                                                </div>
                                            </div>
                                            <div class="el-scrollbar__bar is-vertical">
                                                <div class="el-scrollbar__thumb" style="transform: translateY(0%);">
                                                </div>
                                            </div>
                                        </div>
                                        <!---->
                                    </div>
                                </div>
                                <div data-v-4ed19afa="" class="el-select typeInput">
                                    <div class="el-select__tags" style="width: 100%; max-width: 328px;">
                                        <!---->
                                        <span>
                                            <span class="el-tag el-tag--info el-tag--small el-tag--light">
                                                <span class="el-select__tags-text">
                                                    Landsat&nbsp;8
                                                </span>
                                            </span>
                                            <span class="el-tag el-tag--info el-tag--small el-tag--light">
                                                <span class="el-select__tags-text">
                                                    Landsat&nbsp;9
                                                </span>
                                            </span>
                                            <span class="el-tag el-tag--info el-tag--small el-tag--light">
                                                <span class="el-select__tags-text">
                                                    Sentinel&nbsp;1
                                                </span>
                                            </span>
                                        </span>
                                        <input type="text" autocomplete="off" class="el-select__input"
                                               style="flex-grow: 1; width: 0.0609756%; max-width: 318px;">
                                    </div>
                                    <div class="el-input el-input--suffix">
                                        <!---->
                                        <input type="text" readonly="readonly" autocomplete="off" placeholder=""
                                               class="el-input__inner" style="height: 78px;">
                                        <!---->
                                        <span class="el-input__suffix">
									<span class="el-input__suffix-inner">
										<i class="el-select__caret el-input__icon el-icon-arrow-up">
										</i>
                                        <!---->
                                        <!---->
                                        <!---->
                                        <!---->
                                        <!---->
									</span>
                                            <!---->
								</span>
                                        <!---->
                                        <!---->
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div data-v-5855f98c="" class="list list-title clearfix">
                            <div data-v-5855f98c="" class="fl dateLabel dateActive">
                                采集时间
                            </div>
                            <div data-v-5855f98c="" class="fr dropdown_wrap">
                                <div data-v-5855f98c="" class="el-dropdown">
							<span data-v-5855f98c="" class="el-dropdown-link el-dropdown-selfdefine"
                                  aria-haspopup="list" aria-controls="dropdown-menu-3206" role="button" tabindex="0">
								按本地时间
								<i data-v-5855f98c="" class="el-icon-arrow-down el-icon--right">
								</i>
								<i data-v-5855f98c="" class="el-icon-caret-bottom">
								</i>
							</span>
                                </div>
                            </div>
                        </div>
                        <div data-v-5855f98c="" class="list date-wrap">
                            <div data-v-5855f98c=""
                                 class="datepicker-scope el-date-editor el-range-editor el-input__inner el-date-editor--datetimerange"
                                 rightcurrentmonth="true">
                                <i class="el-input__icon el-range__icon el-icon-time">
                                </i>
                                <input type="text" autocomplete="off" id="startdate" placeholder="开始日期"
                                       name="startdate" class="el-range-input">
                                <span class="el-range-separator">
                                            -
                                </span>
                                <input type="text" autocomplete="off" id="enddate" placeholder="结束日期"
                                       name="enddate" class="el-range-input">
                                <i class="el-input__icon el-range__close-icon">
                                </i>
                            </div>
                        </div>
                        <div data-v-5855f98c="" class="clearfix">
                            <div data-v-5855f98c="" class="fl">
                                <div data-v-5855f98c="" class="list-half list-title">
                                    检索内容
                                </div>
                                <div data-v-5855f98c="" class="list-half elevator_rail">
                                    <div data-v-5855f98c="" class="el-select">
                                        <div class="el-input el-input--suffix">
                                            <button id="choose" type="button" class="btn btn-default dropdown-toggle"
                                                    style="height:30px; width:170px;" data-toggle="dropdown"
                                                    aria-haspopup="true" aria-expanded="false">
                                                <div style="font-size:12px">
                                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;选择&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                </div>
                                                    <span class="el-input__suffix">
                                                    <span class="el-input__suffix-inner">
                                                        <i class="el-select__caret el-input__icon el-icon-arrow-up">
                                                        </i>
                                                    </span>
                                                </span>
                                            </button>
                                            <input name="datatype" id="datatype" value="1" style="display: none;">
                                            <ul class="dropdown-menu" style="position:absolute; top:-220%; left:0;">
                                                <li><a id="yuanshi">原始数据</a></li>
                                                <hr style="margin: 0;border: none;border-top: 1px solid #ccc;">
                                                <li><a id="bianhua">变化事件</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div data-v-5855f98c="" style="display: none;">
                            <div data-v-5855f98c="" class="list list-title">
                                工作模式
                            </div>
                            <div data-v-5855f98c="" class="list">
                                <div data-v-5855f98c="" class="el-select">
                                    <!---->
                                    <div class="el-input el-input--suffix">
                                        <!---->
                                        <input type="text" readonly="readonly" autocomplete="off" placeholder="全部"
                                               class="el-input__inner">
                                        <!---->
                                        <span class="el-input__suffix">
									<span class="el-input__suffix-inner">
										<i class="el-select__caret el-input__icon el-icon-arrow-up">
										</i>
                                        <!---->
                                        <!---->
                                        <!---->
                                        <!---->
                                        <!---->
									</span>
                                            <!---->
								</span>
                                        <!---->
                                        <!---->
                                    </div>
                                    <div class="el-select-dropdown el-popper" style="display: none;">
                                        <div class="el-scrollbar" style="display: none;">
                                            <div class="el-select-dropdown__wrap el-scrollbar__wrap"
                                                 style="margin-bottom: -6px; margin-right: -6px;">
                                                <ul class="el-scrollbar__view el-select-dropdown__list">
                                                </ul>
                                            </div>
                                            <div class="el-scrollbar__bar is-horizontal">
                                                <div class="el-scrollbar__thumb" style="transform: translateX(0%);">
                                                </div>
                                            </div>
                                            <div class="el-scrollbar__bar is-vertical">
                                                <div class="el-scrollbar__thumb" style="transform: translateY(0%);">
                                                </div>
                                            </div>
                                        </div>
                                        <p class="el-select-dropdown__empty">
                                            无数据
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div data-v-258a4cb6="" id="result" class="zyb-lb" style="display:none;">
	        <span data-v-258a4cb6="" class="lb-gb icon iconfont iconshanchu" id='shanchu'>
	        </span>
            <ul data-v-258a4cb6="" role="menubar" class="el-menu-demo el-menu--horizontal el-menu">
                <li data-v-258a4cb6="" role="menuitem" tabindex="-1" class="el-menu-item is-active"
                    popper-class="conditionmenu" style="color: rgb(36, 46, 66); border-bottom-color: rgb(36, 46, 66);">
                    <div data-v-258a4cb6="" class="nav-item clearfix">
				<span data-v-258a4cb6="" class="fl">
					数据检索
				</span>
                        <i data-v-258a4cb6="" class="el-icon-caret-bottom fl">
                        </i>
                    </div>
                </li>
            </ul>
            <!---->
            <div data-v-258a4cb6="">
                <div data-v-511cb7b3="" data-v-258a4cb6="" class="clearfix">
                    <div data-v-511cb7b3="" class="btn-wrap clearfix">
{#                        <div data-v-511cb7b3="" class="tabhedbox clearfix">#}
{#                            <a data-v-511cb7b3="" class="tablebal level-one fl tabactive" id="a_show_1">#}
{#                                光学影像#}
{#                            </a>#}
{#                        </div>#}
{#                        <div data-v-511cb7b3="" class="tabhedbox clearfix">#}
{#                            <a data-v-511cb7b3="" class="tablebal level-one fl" id="a_show_2">#}
{#                                SAR图像#}
{#                            </a>#}
{#                        </div>#}
                        <div data-v-511cb7b3="" class="tabhedbox clearfix">
                            <a data-v-511cb7b3="" class="tablebal level-one fl" id="a_show_3">
                                地物分类
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div data-v-258a4cb6="" class="tabbox">

                <div data-v-258a4cb6=""
                     class="el-table el-table--fit el-table--fluid-height el-table--enable-row-hover el-table--enable-row-transition"
                     style="width: 100%; max-height: 481px;" id="dataTable">
                    <div class="hidden-columns">
                        <div data-v-258a4cb6="">
                        </div>
                        <div data-v-258a4cb6="">
                        </div>
                        <div data-v-258a4cb6="">
                        </div>
                    </div>
                    <div class="el-table__body-wrapper is-scrolling-none" id="show_1"
                         style="overflow-y:auto;height:481px;">
                        <table cellspacing="0" cellpadding="0" border="0" class="el-table__body"
                               style="width: 420px;">
                            <colgroup>
                                <col name="el-table_2_column_3" width="50">
                                <col name="el-table_2_column_4" width="50">
                                <col name="el-table_2_column_5" width="320">
                            </colgroup>
                            <tbody>

                            </tbody>
                        </table>
                        <!---->
                        <!---->
                    </div>
                    <div class="el-table__body-wrapper is-scrolling-none" id="show_2"
                         style="overflow-y:auto;height:481px;display:none;">
                        <table cellspacing="0" cellpadding="0" border="0" class="el-table__body"
                               style="width: 420px;">
                            <colgroup>
                                <col name="el-table_2_column_3" width="50">
                                <col name="el-table_2_column_4" width="50">
                                <col name="el-table_2_column_5" width="320">
                            </colgroup>
                            <tbody>
                            </tbody>
                        </table>
                        <!---->
                        <!---->
                    </div>
                    <div class="el-table__body-wrapper is-scrolling-none" id="show_3"
                         style="overflow-y:auto;height:481px;display:none;">
                        <table cellspacing="0" cellpadding="0" border="0" class="el-table__body"
                               style="width: 420px;">
                            <colgroup>
                                <col name="el-table_2_column_3" width="50">
                                <col name="el-table_2_column_4" width="50">
                                <col name="el-table_2_column_5" width="320">
                            </colgroup>
                            <tbody>

                            </tbody>
                        </table>
                        <!---->
                        <!---->
                    </div>
                    <!---->
                    <!---->
                    <!---->
                    <!---->
                    <div class="el-table__column-resize-proxy" style="display: none;">
                    </div>
                </div>
                <div data-v-258a4cb6="" class="tablebox" style="display: none;">
                    <div data-v-258a4cb6="" class="fgl_results_operation clearfix" style="display: none;">
                        <div data-v-258a4cb6="" class="fl bt">
                            <div data-v-258a4cb6="" class="wrap">
                                <i data-v-258a4cb6="" class="icon iconfont icontietu">
                                </i>
                            </div>
                        </div>
                        <div data-v-258a4cb6="" class="fl bt">
                            <div data-v-258a4cb6="" class="wrap">
                                <i data-v-258a4cb6="" class="icon iconfont iconxiazai2">
                                </i>
                            </div>
                        </div>
                    </div>
                    <div data-v-258a4cb6=""
                         class="el-table el-table--fit el-table--fluid-height el-table--scrollable-x el-table--enable-row-hover"
                         style="width: 100%; max-height: 481px;">
                        <div class="hidden-columns">
                            <div data-v-258a4cb6="">
                            </div>
                            <div data-v-258a4cb6="">
                            </div>
                            <div data-v-258a4cb6="">
                            </div>
                            <div data-v-258a4cb6="">
                            </div>
                            <div data-v-258a4cb6="">
                            </div>
                        </div>
                        <div class="el-table__body-wrapper is-scrolling-left" style="max-height: 481px;">
                            <table cellspacing="0" cellpadding="0" border="0" class="el-table__body"
                                   style="width: 420px;">
                                <colgroup>
                                    <col name="el-table_3_column_6" width="120">
                                    <col name="el-table_3_column_7" width="60">
                                    <col name="el-table_3_column_8" width="60">
                                    <col name="el-table_3_column_9" width="60">
                                    <col name="el-table_3_column_10" width="120">
                                </colgroup>
                                <tbody>
                                    <!---->
                                </tbody>
                            </table>
                            <div class="el-table__empty-block" style="width: 420px;">
					<span class="el-table__empty-text">
						暂无数据
					</span>
                            </div>
                            <!---->
                        </div>
                        <!---->
                        <!---->
                        <!---->
                        <!---->
                        <div class="el-table__column-resize-proxy" style="display: none;">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="rec" class="alert alert-warning alert-dismissible" role="alert" style="z-index: 999; display: none; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 500px; text-align: center;">
            <button id="bt" type="button" style="z-index:999;display:none;position: absolute; right: 0;" class="close"><span aria-hidden="true">&times;</span></button>
            <img id="figure" src="" alt="暂无" style="width: 470px; border: 2px solid white; border-radius: 10px;z-index:999;display:none;">
        </div>
        <div data-v-6e4950ed="" data-v-258a4cb6="" class="el-dialog__wrapper map-search-wrap clearfix"
                 id="mapinfo_dialog" style="z-index: 9999;display: none;">
                <div role="dialog" aria-modal="true" aria-label="产品详情" class="el-dialog el-dialog--center"
                     style="margin-top: 0vh; width: 1350px;">
                    <div class="el-dialog__header">
                    <span class="el-dialog__title">
                        产品详情
                    </span>
                        <button type="button" aria-label="Close" class="el-dialog__headerbtn">
                            <i class="el-dialog__close el-icon el-icon-close">
                            </i>
                        </button>
                    </div>
                    <div class="el-dialog__body">
                        <div data-v-6e4950ed="" class="mapSearchContent">
                            <div data-v-6e4950ed="" class="fgl_results_operation clearfix">
                                <div data-v-6e4950ed="" class="fl bt">
                                    <div data-v-6e4950ed="" class="iconqiebox">
                                        <i data-v-6e4950ed="" class="el-icon-close close-btn" id="close2">
                                        </i>
                                    </div>
                                </div>
                            </div>
                            <div data-v-6e4950ed="" class="meta-data-dialog clearfix">
                                <div data-v-6e4950ed="" class="meta-data-map fl">
                                    <div data-v-6e4950ed="" id="mapContainer"
                                         class="map-right leaflet-container leaflet-touch leaflet-retina leaflet-fade-anim leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
                                         style="position: relative;" tabindex="0">
    {#                                    <img src="{% static 'images/1.png' %}" style="height:600px;width:600px;"/>#}
                                    </div>
                                </div>
                                <div data-v-6e4950ed="" class="meta-data-detail fl">
                                    <!---->
                                    <div data-v-6e4950ed="" class="image-info">
                                        <div data-v-6e4950ed="" class="base-info">
                                            <div data-v-6e4950ed="" class="info-title" style="font-size:20px;">
                                                基本信息
                                            </div>
                                            <div data-v-6e4950ed="" class="info-content" style="">
                                                <div data-v-6e4950ed="" class="clearfix">
                                                    <div data-v-6e4950ed="" class="infoTd" style="font-size:15px;width:100%;">
{#                                                        编号:&nbsp;<span id="event_id"></span>#}
                                                    </div>
                                                    <div data-v-6e4950ed="" class="infoTd" style="font-size:15px;width:100%;">
{#                                                        时间:&nbsp;<span id="date"></span>#}
                                                    </div>
                                                    <div data-v-6e4950ed="" class="infoTd" style="font-size:15px;width:100%;">
                                                        地点:&nbsp;<span id="address"></span>
                                                    </div>
                                                    <div data-v-6e4950ed="" class="infoTd" style="font-size:15px;width:100%;">
                                                        bbox:&nbsp;<span id="bbox"></span>
                                                    </div>
                                                </div>
                                                <div data-v-6e4950ed="" class="clearfix">
                                                </div>
                                                <div data-v-6e4950ed="" class="clearfix">
                                                </div>
                                                <div data-v-6e4950ed="" class="clearfix">
                                                </div>
                                                <div data-v-6e4950ed="" class="clearfix">
                                                </div>
                                                <div data-v-6e4950ed="" class="clearfix">
                                                </div>
                                                <div data-v-6e4950ed="" class="clearfix">
                                                </div>
                                            </div>
                                            <div data-v-6e4950ed="" class="info-content clearfix" style="display: none;">
                                                <div data-v-6e4950ed="" class="skeleton-wrap">
                                                    <div data-v-6e4950ed="" class="skeleton is-animated">
                                                    </div>
                                                    <div data-v-6e4950ed="" class="skeleton is-animated">
                                                    </div>
                                                    <div data-v-6e4950ed="" class="skeleton is-animated">
                                                    </div>
                                                </div>
                                                <div data-v-6e4950ed="" class="skeleton-wrap">
                                                    <div data-v-6e4950ed="" class="skeleton is-animated">
                                                    </div>
                                                    <div data-v-6e4950ed="" class="skeleton is-animated">
                                                    </div>
                                                    <div data-v-6e4950ed="" class="skeleton is-animated">
                                                    </div>
                                                </div>
                                                <div data-v-6e4950ed="" class="skeleton-wrap">
                                                    <div data-v-6e4950ed="" class="skeleton is-animated">
                                                    </div>
                                                    <div data-v-6e4950ed="" class="skeleton is-animated">
                                                    </div>
                                                    <div data-v-6e4950ed="" class="skeleton is-animated">
                                                    </div>
                                                </div>
                                                <div data-v-6e4950ed="" class="skeleton-wrap">
                                                    <div data-v-6e4950ed="" class="skeleton is-animated">
                                                    </div>
                                                    <div data-v-6e4950ed="" class="skeleton is-animated">
                                                    </div>
                                                    <div data-v-6e4950ed="" class="skeleton is-animated">
                                                    </div>
                                                </div>
                                                <div data-v-6e4950ed="" class="skeleton-wrap">
                                                    <div data-v-6e4950ed="" class="skeleton is-animated">
                                                    </div>
                                                    <div data-v-6e4950ed="" class="skeleton is-animated">
                                                    </div>
                                                    <div data-v-6e4950ed="" class="skeleton is-animated">
                                                    </div>
                                                </div>
                                                <div data-v-6e4950ed="" class="skeleton-wrap">
                                                    <div data-v-6e4950ed="" class="skeleton is-animated">
                                                    </div>
                                                    <div data-v-6e4950ed="" class="skeleton is-animated">
                                                    </div>
                                                    <div data-v-6e4950ed="" class="skeleton is-animated">
                                                    </div>
                                                </div>
                                                <div data-v-6e4950ed="" class="skeleton-wrap">
                                                    <div data-v-6e4950ed="" class="skeleton is-animated">
                                                    </div>
                                                    <div data-v-6e4950ed="" class="skeleton is-animated">
                                                    </div>
                                                    <div data-v-6e4950ed="" class="skeleton is-animated">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div data-v-6e4950ed="" class="prod-params">
                                            <div data-v-6e4950ed="" class="info-title" style="font-size:20px;">
                                                事件详情
                                            </div>
                                            <div data-v-6e4950ed="" class="info-content">
                                                <div data-v-6e4950ed="" class="clearfix" id="information">
                                                </div>
                                            </div>
                                            <div data-v-6e4950ed="" class="info-content clearfix" style="display: none;">
                                                <div data-v-6e4950ed="" class="skeleton-wrap">
                                                    <div data-v-6e4950ed="" class="skeleton is-animated">
                                                    </div>
                                                    <div data-v-6e4950ed="" class="skeleton is-animated">
                                                    </div>
                                                    <div data-v-6e4950ed="" class="skeleton is-animated">
                                                    </div>
                                                </div>
                                                <div data-v-6e4950ed="" class="skeleton-wrap">
                                                    <div data-v-6e4950ed="" class="skeleton is-animated">
                                                    </div>
                                                    <div data-v-6e4950ed="" class="skeleton is-animated">
                                                    </div>
                                                    <div data-v-6e4950ed="" class="skeleton is-animated">
                                                    </div>
                                                </div>
                                                <div data-v-6e4950ed="" class="skeleton-wrap">
                                                    <div data-v-6e4950ed="" class="skeleton is-animated">
                                                    </div>
                                                    <div data-v-6e4950ed="" class="skeleton is-animated">
                                                    </div>
                                                    <div data-v-6e4950ed="" class="skeleton is-animated">
                                                    </div>
                                                </div>
                                                <div data-v-6e4950ed="" class="skeleton-wrap">
                                                    <div data-v-6e4950ed="" class="skeleton is-animated">
                                                    </div>
                                                    <div data-v-6e4950ed="" class="skeleton is-animated">
                                                    </div>
                                                    <div data-v-6e4950ed="" class="skeleton is-animated">
                                                    </div>
                                                </div>
                                                <div data-v-6e4950ed="" class="skeleton-wrap">
                                                    <div data-v-6e4950ed="" class="skeleton is-animated">
                                                    </div>
                                                    <div data-v-6e4950ed="" class="skeleton is-animated">
                                                    </div>
                                                    <div data-v-6e4950ed="" class="skeleton is-animated">
                                                    </div>
                                                </div>
                                                <div data-v-6e4950ed="" class="skeleton-wrap">
                                                    <div data-v-6e4950ed="" class="skeleton is-animated">
                                                    </div>
                                                    <div data-v-6e4950ed="" class="skeleton is-animated">
                                                    </div>
                                                    <div data-v-6e4950ed="" class="skeleton is-animated">
                                                    </div>
                                                </div>
                                                <div data-v-6e4950ed="" class="skeleton-wrap">
                                                    <div data-v-6e4950ed="" class="skeleton is-animated">
                                                    </div>
                                                    <div data-v-6e4950ed="" class="skeleton is-animated">
                                                    </div>
                                                    <div data-v-6e4950ed="" class="skeleton is-animated">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!---->
                </div>
        </div>
    </body>

    <script>

        var map = new BMapGL.Map('map'); // 创建Map实例
        map.centerAndZoom(new BMapGL.Point(106, 36), 5); // 初始化地图,设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
        map.setMapType(BMAP_EARTH_MAP);      // 设置地图类型为地球模式
        //map.setMapType(BMAP_SATELLITE_MAP);      // 设置地图类型为普通卫星地图模式
        map.disableKeyboard(); // 禁用键盘操作

    </script>

    <script>
        var position1 = {{ position1|safe }};
        var rectangles = [];
        var points = [];
        var marker;
        var circle;
        var path = [];                                                                              //原始数据的path
        var path_bh = [];                                                                             //变化数据的path
        var mapmask;
        var datatype = document.getElementById("datatype");                                        //1代表原始数据，0代表变化数据
        var dataBound;
        var zindex = 9999;
        var startdate;
        var enddate;
        document.getElementById("yuanshi").addEventListener('click', function() {
            document.getElementById("choose").innerText = "      原始数据      ";
            datatype.value = "1";
        });
        document.getElementById("bianhua").addEventListener('click', function() {
            document.getElementById("choose").innerText = "      变化事件      ";
            datatype.value = "0";
        });
        let tb = document.getElementById("dataTable")
        tb.addEventListener('click', function (event) {
            if (event.target.tagName === 'SPAN') {
                let trElement = event.target.closest('tr');
                if (trElement) {
                    let trId = trElement.getAttribute('id');
                    console.log('Clicked label ID: ' + trId);
                    for (let i = 0; i < rectangles.length; i++) {
                        rectangles[i].setOptions({strokeColor: 'blue', strokeOpacity: 0.4, fillOpacity: 0.1, fillColor: 'white', strokeWeight: 1});
                    }
                    rectangles[trId].setZIndex(zindex);
                    rectangles[trId].setOptions({strokeColor: 'red', strokeOpacity: 1, fillOpacity: 0.5, fillColor: 'red', strokeWeight: 3});
                    zindex++;
                }
            }
            if (event.target.tagName === 'P') {             //跳转到第二个页面
                let trElement = event.target.closest('tr');
                if (trElement) {
                    let trId = trElement.getAttribute('id');
                    console.log('Clicked label ID: ' + trId);
                    var csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;
                    let scene_id = event.target.id;
                    let date = event.target.dataset.date;
                    console.log(date);
                    {#window.location.href = `tackle.html/${scene_id}/0`;#}
                    window.open(`tackle.html/${scene_id}/${date}/0/1`, '_blank')
                }
            }
            if (event.target.tagName === 'IMG') {           //显示图片
                document.getElementById("figure").style.display = "inline-block";
                document.getElementById("figure").src = event.target.src;
                document.getElementById("rec").style.display = "inline-block";
                document.getElementById("bt").style.display = "inline-block";
            }
        });
        document.getElementById("bt").addEventListener('click', function (event) {
            document.getElementById("figure").style.display = "none";
            document.getElementById("rec").style.display = "none";
            document.getElementById("bt").style.display = "none";
        })

        $("#myForm").submit(function (e) {                       //用户输入数据并提交
            if (datatype.value === "1") {                                //原始数据
                e.preventDefault();
                //$(document).ajaxStart(function () {                  //ajax请求调用后生成加载框
                {#let amis = amisRequire('amis/embed');#}
                {#let AMISJSON = {#}
                {#    "body": {#}
                {#        "type": "spinner",#}
                {#        "name": "loadingSpinner",#}
                {#        "show": true,#}
                {#        "overlay": true,#}
                {#        "size": "lg",#}
                {#    }#}
                //}
                {#let amisScope = amis.embed('#search_result', AMISJSON);#}
                //});
                startdate = document.getElementById("startdate").value;
                enddate = document.getElementById("enddate").value;
                sendDataToBackend(document.getElementById("position1").value, startdate, enddate, {{ MEDIA_URL }});
            } else {
                //变化数据
                e.preventDefault();
                removing();
                moveRight(0);
                moveLeft(0);
                $.ajax({
                    type: "POST",
                    url: "/",
                    data: {
                        "position1": document.getElementById("position1").value,
                        "datatype": 0
                    },
                    success: function(response) {
                        // _bh 指变化数据
                        console.log(response);
                        if (response.len === 0) {
                            alert('该地区暂无变化数据');
                            moveLeft(1);
                        }
                        else {
                            const event_id_bh = response.event_id;
                            const date_bh = response.date;
                            const bbox_bh = response.bbox;
                            const information_bh = response.information;
                            const address_bh = response.address;
                            const boundary_bh = response.boundary;
                            const len = boundary_bh.length;
                            const event_id1 = document.getElementById('event_id');
                            const date1 = document.getElementById('date');
                            const address1 = document.getElementById('address');
                            const bbox1 = document.getElementById('bbox');
                            const information1 = document.getElementById('information');
                            const mapinfo_dialog1 = document.getElementById('mapinfo_dialog');
                            let centers = [0, 0];

                            for (let i = 0; i < len; i++) {
                                const center = [(bbox_bh[i][0] + bbox_bh[i][2]) / 2, (bbox_bh[i][1] + bbox_bh[i][3]) / 2];
                                centers[0] += (bbox_bh[i][0] + bbox_bh[i][2]);
                                centers[1] += (bbox_bh[i][1] + bbox_bh[i][3]);
                                let mPoint = new BMapGL.Point(center[0], center[1])
                                let marker = new BMapGL.Marker(mPoint);
                                points.push(marker);
                                let mapmask;
                                let border;
                                let path = [];
                                let point;
                                for (let j = 0; j < boundary_bh[i].length; j++) {
                                    point = new BMapGL.Point(parseFloat(boundary_bh[i][j][0]), parseFloat(boundary_bh[i][j][1]));
                                    path.push(point);
                                }
                                mapmask = new BMapGL.MapMask(path, {
                                    isBuildingMask: true,
                                    isPoiMask: true,
                                    isMapMask: true,
                                    showRegion: 'inside',
                                    topFillColor: '#5679ea',
                                    topFillOpacity: 0.5,
                                    sideFillColor: '#5679ea',
                                    sideFillOpacity: 0.9
                                });
                                path_bh.push(mapmask);
                                {#console.log(mapmask);#}
                                map.addOverlay(mapmask);
                                border = new BMapGL.Polyline(path, {
                                    strokeColor: '#4ca7a2',
                                    strokeWeight: 3,
                                    strokeOpacity: 1
                                });
                                map.addOverlay(border);
                                map.addOverlay(marker);
                                marker.addEventListener('click', () => {
                                    {#event_id1.innerText = event_id_bh[i].toString();#}
                                    {#date1.innerText = date_bh[i];#}
                                    address1.innerText = address_bh[i];
                                    bbox1.innerText = bbox_bh[i].toString();
                                    information1.innerText = information_bh[i];
                                    mapinfo_dialog1.style.display = 'block';
                                })
                            }
                            centers[0] /= (len * 2);
                            centers[1] /= (len * 2);
                            const mPoint = new BMapGL.Point(centers[0], centers[1]);
                            map.enableScrollWheelZoom();
                            map.centerAndZoom(mPoint, 8);                          //后续还需调整地图级别
                        }
                    }
                })
            }
        });
        {#let elements = document.getElementsByClassName('recommend-list-item');              //点击推荐地区#}
        {#for (let i = 0; i < elements.length; i++) {#}
        {#    elements[i].addEventListener('click', function () {#}
        {#        let position1 = this.id;#}
        {#        $(document).ajaxStart(function () {                  //ajax请求调用后生成加载框#}
        {#            let amis = amisRequire('amis/embed');#}
        {#            let AMISJSON = {#}
        {#                "body": {#}
        {#                    "type": "spinner",#}
        {#                    "name": "loadingSpinner",#}
        {#                    "show": true,#}
        {#                    "overlay": true,#}
        {#                    "size": "lg",#}
        {#                }#}
        {#            }#}
        {#            let amisScope = amis.embed('#search_result', AMISJSON);#}
        {#        });#}
        {#        sendDataToBackend(position1, "2000-01-01", "3000-01-01");#}
        {#    });#}
        //}
    </script>

    <script>
        {#const a_show_1 = document.getElementById('a_show_1');#}
        {#const show_1 = document.getElementById('show_1');#}
        {#const a_show_2 = document.getElementById('a_show_2');#}
        {#const show_2 = document.getElementById('show_2');#}
        const a_show_3 = document.getElementById('a_show_3');
        const show_3 = document.getElementById('show_3');

        a_show_3.addEventListener('click', function () {
            show_1.style.display = "none";
            show_2.style.display = "none";
            show_3.style.display = "block";
            a_show_3.className = "tablebal level-one fl tabactive";
            {#a_show_1.className = "tablebal level-one fl";#}
            {#a_show_2.className = "tablebal level-one fl";#}
        });
        document.getElementById('close2').addEventListener('click', function () {
            document.getElementById('mapinfo_dialog').style.display = "none";
        });
    </script>

    <script>
        var left = document.getElementById('left');                     // 点击显示左边部分的按钮
        var search_right = document.getElementById('search_right');     // 点击隐藏左边部分的按钮
        var search_set = document.getElementById('search_set');         // 左边选择搜索的部分
        var result = document.getElementById('result');                 // 右边显示搜索结果的部分
        var isMoved = false;                                            // 表示左边部分是否显示
        var isMoved1 = false;                                           // 表示右边部分是否显示

        // 控制左边板块显示与否
        function moveLeft(m) {
            console.log(isMoved + "  isMoved")
            if (m === 0) {                          // 隐藏
                left.style.display = 'block';
                search_right.style.display = 'none';
                search_set.style.display = 'none';
                isMoved = true;
            } else {                                // 显示
                left.style.display = 'none';
                search_right.style.display = 'block';
                search_set.style.display = 'block';
                isMoved = false;
            }
        }

        // 控制右边板块显示与否
        function moveRight(m) {
            console.log(isMoved1 + "  isMoved1");
            if (m === 1) {                          // 显示
                result.style.display = 'block'
                isMoved1 = !isMoved1
            } else {                                // 隐藏
                result.style.display = 'none'
                isMoved1 = false
            }
        }

        // 在map上覆盖图片
        function drawImage(x1, y1, x2, y2, url) {
            const pStart = new BMapGL.Point(x1, y2);
            const pEnd = new BMapGL.Point(x2, y1);
            const bounds = new BMapGL.Bounds(new BMapGL.Point(pStart.lng, pStart.lat), new BMapGL.Point(pEnd.lng, pEnd.lat));
            const opts = {
                type: 'image',
                url: url,
                opacity: 0.5
            };
            return new BMapGL.GroundOverlay(bounds, opts);
        }

        var map1 = new BMapGL.Map('mapContainer');
        map1.enableScrollWheelZoom(true);
        map1.centerAndZoom(new BMapGL.Point(113.740917, 41.893814), 8); // 初始化地图,设置中心点坐标和地图级别
        let overlayImage = drawImage(114.09333, 38.942646, 117.388504, 40.844982, "{% static 'images/1.png' %}");
        console.log(overlayImage);
        // 覆盖物添加到地图
        map1.addOverlay(overlayImage);

    </script>

    <script>
        $('.dropdown-toggle').dropdown()
    </script>


    <style>/*去除百度地图版权*/

    .anchorBL {

        display: none;

    }

    </style>

</html>